<template>
    <l-fullscreen-dialog :visible.sync="formVisible" :height="700" :width="1200" @close="handleCloseForm" :showOk="false"
        @opened="handleOpenedForm" :hasBtns="false" ref="lrDialog">
        <template #title>
            <h3>{{ landFormData.name || "---" }}</h3>
        </template>
        <div class="cards-container">
            <!-- 基本信息 -->
            <template>
                <basicInformation ref="basicInformation" class="basic-card" :landTableData="landFormData"
                    :landDetailedInfo="landDetailedInfo" />
            </template>
            <el-tabs v-model="activeName">
                <el-tab-pane
                    :label="lr_dataItemName(lr_dataItem['industrial_update_code'], this.landFormData.industrialUpdateCode) ? `产业更新 [ ${lr_dataItemName(lr_dataItem['industrial_update_code'], this.landFormData.industrialUpdateCode)} ]` : '产业更新'"
                    name="first">
                    <div class="right">
                        <div class="top">
                            <!-- 近5年亩均税收走势 -->
                            <template>
                                <industrialRenewal :scheduleDate="scheduleDate" ref="industrialRenewal"
                                    :landFormData="landFormData" />
                            </template>
                            <!-- 产业更新规划指标 -->
                            <template>
                                <planningIndex ref="planningIndex" :landTableData="landFormData" />
                            </template>
                            <!-- 产业更新进度 -->
                            <template>
                                <updateProgress @provideData="provideDataHandler" ref="updateProgress"
                                    :landid="landFormData.id" />
                            </template>
                        </div>
                        <!-- 入驻企业 -->
                        <template>
                            <settledEnterprise ref="settledEnterprise" :landTableData="landFormData" />
                        </template>
                        <!-- 企业更新档案 -->
                        <template>
                            <firmUpdateFIle ref="firmUpdateFIle" :landTableData="landFormData" />
                        </template>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="企业画像" name="second">
                    <div class="top">
                        <!-- 工商信息 -->
                        <template>
                            <lcInformation ref="lcInformation"
                                :unifiedSocialCreditCode="landFormData.unifiedSocialCreditCode" />
                        </template>
                        <!-- 税务信息 -->
                        <template>
                            <taxInformation ref="taxInformation"
                                :unifiedSocialCreditCode="landFormData.unifiedSocialCreditCode" />
                        </template>
                    </div>
                    <div class="top">
                        <!-- 工业能耗 -->
                        <template>
                            <energyCost ref="energyCost" :unifiedSocialCreditCode="landFormData.unifiedSocialCreditCode" />
                        </template>
                        <!-- 行政审批 -->
                        <template>
                            <adminApproval ref="adminApproval"
                                :unifiedSocialCreditCode="landFormData.unifiedSocialCreditCode" />
                        </template>
                    </div>
                    <div class="top">
                        <!-- 环保安监 -->
                        <template>
                            <environmental ref="environmental"
                                :unifiedSocialCreditCode="landFormData.unifiedSocialCreditCode" />
                        </template>
                        <!-- 人社信息 -->
                        <template>
                            <humanSocialInfo ref="humanSocialInfo"
                                :unifiedSocialCreditCode="landFormData.unifiedSocialCreditCode" />
                        </template>
                    </div>
                    <div class="top">
                        <!-- 国土信息 -->
                        <template>
                            <landInfo ref="landInfo" :unifiedSocialCreditCode="landFormData.unifiedSocialCreditCode" />
                        </template>
                        <!-- 科技专题 -->
                        <template>
                            <technology ref="technology" :unifiedSocialCreditCode="landFormData.unifiedSocialCreditCode" />
                        </template>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </l-fullscreen-dialog>
</template>

<script>
import settledEnterprise from "./settledEnterprise"
import firmUpdateFIle from "./firmUpdateFIle";
import basicInformation from "./basicInformation"
import planningIndex from "./planningIndex"
import industrialRenewal from "./industrialRenewal"
import updateProgress from "./updateProgress"
import lcInformation from "./lcInformation"
import taxInformation from "./taxInformation"
import energyCost from "./energyCost"
import adminApproval from "./adminApproval"
import environmental from "./environmental"
import humanSocialInfo from "./humanSocialInfo"
import landInfo from "./landInfo"
import technology from "./technology"
import {
    landFormData,
    landColumns,
    revenueTableColmuns,
    dynApi,
} from "../columns";
export default {
    components: {
        settledEnterprise,
        firmUpdateFIle,
        basicInformation,
        planningIndex,
        industrialRenewal,
        updateProgress,
        lcInformation,
        taxInformation,
        energyCost,
        adminApproval,
        environmental,
        humanSocialInfo,
        landInfo,
        technology
    },
    props: {
        formEdit: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            formVisible: false,
            landFormData,
            landColumns,
            revenueTableColmuns,
            dynApi,
            options: {},
            rules: {
            },
            labelIdList: [],
            activeName: "first",
            landDetailedInfo: {},
            scheduleDate: ""
        };
    },
    computed: {
        typesOptions() {
            return this.lr_dataItemOptions(this.lr_dataItem["types"]);
        },
    },
    mounted() {

    },
    methods: {
        open(row = {}, options = {}) {
            this.options = options;
            this.landFormData = Object.assign({}, landFormData, row);
            this.$refs.lrDialog.isfullscreen = true;
            this.$refs.lrDialog.onMousedown = function () { }
            this.formVisible = true;
            this.$nextTick(async () => {
                let res = await this.dynApi.get(row.id);
                if (res.data.code === 200) {
                    this.landDetailedInfo = res.data.data;
                    this.$refs.settledEnterprise.init();
                    this.$refs.firmUpdateFIle.init();
                }
            });
        },
        handleCancel() {
            this.formVisible = false;
        },
        provideDataHandler(val) {
            this.scheduleDate = val;
        },
        async handleOpenedForm(showLoading, hideLoading) {
            if (this.formEdit) {
                showLoading("加载数据中...");
                hideLoading();
            }
        },
        refresh() {
            this.$emit("refresh");
        },
        handleCloseForm() {
            this.formVisible = false;
            // this.$refs.lrDialog && this.$formClear(this.$refs.lrDialog)
        },
    },
};
</script>
<style lang="scss" scoped>
::v-deep .el-divider--horizontal {
    margin: 5px 0;
}

::v-deep .cards-container .el-tabs {
    width: 80%;
}

.cards-container {
    height: 100%;
    display: flex;
    gap: 4px;

    .top {
        display: flex;
    }

    .basic-card {
        width: 20%;
    }
}

.header {
    width: 100%;
}




.el-tabs.el-tabs--top {
    height: 100%;
    overflow-y: hidden;
}

.el-tab-pane {
    height: calc(100% - 71px);
    padding: 10px;
    overflow-y: auto;
    box-sizing: border-box;
}

.right {
    height: 100%;
    overflow-y: auto;

    .top {
        gap: 10px;
        max-height: 345px;
        overflow-y: auto;
    }

}
</style>
